﻿<script setup lang="ts">
import { getIconList, iconTypeList } from '@/plugins/svgIcon'
import { cloneDeep } from 'lodash-es'
const iconList = getIconList()
const iconTypeData = iconTypeList()
const props = defineProps({
  icon: { type: String, default: '' }
})

const emit = defineEmits(['update:icon'])
const iconValue = ref(props.icon)
type searchDataType = {
  pageIndex:number,
  pageSize:number,
  type:string,
  name:string,
  fontSize:number,
  isColor:boolean,
}
const searchData = ref<searchDataType>({
  pageIndex: 1,
  pageSize: 30,
  type: '',
  name: '',
  fontSize: 18,
  isColor: false
})

const getInitData = () => {
  initData.value.data = []
  let resultData = cloneDeep(iconList)
  if (searchData.value.type !== '') {
    resultData = resultData.filter((item) => { return item.type === searchData.value.type })
  }
  if (searchData.value.name !== '') {
    resultData = resultData.filter((item) => { return item.key.includes(searchData.value.name) })
  }
  initData.value.total = resultData.length
  initData.value.data = resultData.slice(
    searchData.value.pageSize * (searchData.value.pageIndex - 1),
    searchData.value.pageSize * (searchData.value.pageIndex - 1) + searchData.value.pageSize
  )
  initData.value.data.forEach((item) => {
    const icon = item.type + ':' + item.key
    if (iconValue.value !== '') {
      if (iconValue.value === icon) {
        item.isSelected = true
      } else {
        item.isSelected = false
      }
    } else {
      item.isSelected = false
    }
  })
}
const initData:any = ref({
  data: [],
  total: 0
})
const handleSizeChange = (val: number) => {
  searchData.value.pageSize = val
  searchData.value.pageIndex = 1
  getInitData()
}
const handleCurrentChange = (val: number) => {
  searchData.value.pageIndex = val
  getInitData()
}
getInitData()
const searchChangeHandler = () => {
  searchData.value.pageIndex = 1
  getInitData()
}
const selectIconHandler = (item) => {
  iconValue.value = item.type + ':' + item.key
  initData.value.data.forEach((item) => {
    const icon = item.type + ':' + item.key
    if (iconValue.value !== '') {
      if (iconValue.value === icon) {
        item.isSelected = true
      } else {
        item.isSelected = false
      }
    } else {
      item.isSelected = false
    }
  })
  emit('update:icon', iconValue.value)
}

const valueChangeHandler = (v) => {
  emit('update:icon', v)
}
watch(
  () => props.icon,
  (v) => {
    iconValue.value = v
  }
)
</script>
<template>
  <div class="icon-select">
    <el-input class="icon-input" v-model="iconValue" clearable @change="valueChangeHandler" :placeholder="$t('placeholders.placeholderSelectIcon')" disabled></el-input>
    <el-popover :width="376" trigger="click">
      <template #reference>
        <el-button class="icon-popover"><svg-icon :icon="!iconValue||iconValue === ''?'bi:plus':iconValue" size="18"></svg-icon></el-button>
      </template>
      <div class="icon-popover-wrapper">
        <el-form :inline="true">
          <el-form-item>
            <el-input v-model="searchData.name" :placeholder="$t('placeholders.placeholderInputIconName')" class="input-with-select" clearable style="width: 340px" @change="searchChangeHandler">
              <template #prepend>
                <el-select v-model="searchData.type" :placeholder="$t('placeholders.placeholderSelectIconType')" style="width: 152px" clearable @change="searchChangeHandler" :teleported="false">
                  <el-option :label="$t('page.' + item.label)" :value="item.value" v-for="(item,index) in iconTypeData" :key="index" />
                </el-select>
              </template>
              <template #append>
                <el-button icon="Search" @click="searchChangeHandler" />
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-row>
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" v-for="(item,index) in initData.data" :key="index">
            <el-button :type="item.isSelected?'primary':''" :title="item.key" @click="selectIconHandler(item)">
              <svg-icon :icon="item.type+':'+item.key"></svg-icon>
            </el-button>
          </el-col>
        </el-row>
        <el-pagination
          v-if="initData.total>0"
          v-model:currentPage="searchData.pageIndex"
          v-model:page-size="searchData.pageSize"
          :page-sizes="[30, 60, 90, 120]"
          :pager-count="5"
          :background="true"
          layout="total, prev, next, jumper"
          :total="initData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-popover>
  </div>
</template>
<style lang="scss" scoped>
.icon-select{
  display: flex;
  flex: 1;

  .icon-input{
    flex: 1;

    :deep(.el-input__wrapper){
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .icon-popover{
    position: relative;
    z-index: 1;
    margin-left: -1px;
    padding: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    &.el-button--small{
      padding: 5px 0;
    }

    &.el-button--large{
      padding: 12px 7px;
    }
  }
}

.icon-popover-wrapper{
  .el-row{
    .el-col{
      .el-button{
        margin: 6px;
        padding: 20px 13px;

        .el-icon{
          font-size: 20px!important;
        }
      }
    }
  }

  .el-pagination{
    justify-content: center;
    margin-top: 6px;
  }
}
</style>
